<!DOCTYPE html>
<html>
  <head>
    <title>在浏览器打开</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="color-scheme" content="light dark" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body{
        height: 100vh;
        background-color: black;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .content{
        display: none;
        background-color: #fff;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
      }
      table {
        width: 100%;
        margin-top: 20px;
        font-size: 18px;
        text-align: center;
      }
      .title{
        color: #4b79af;
        text-align: center;
      }
      .bg_title {
        background-color: #4b79af;
        color: #fff;
      }
      .bg_gray {
        background-color: #d0d4e2;
      }
      .bg_blue {
        background-color: #e8eaf5;
      }
      td{
        padding: 3px 5px;
        line-height: 2em;
      }
      tr td:nth-last-child(1){
        padding-left: 20px;
        text-align: left;
      }
      .login{
        border-radius: 20px;
        width: 80%;
        background-color: #fff;
        text-align: center;
        padding: 20px;
      }
      .login h6{
        line-height: 2em;
      }
      .login input{
        margin-top: 10px;
        height: 3em;
        width: 80%;
        font-size: 1.5em;
        text-align: center;
      }
      .login #login{
        margin-top: 40px;
        padding: 3px 10px;
        font-size: 1.5em;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1 class="title">车 辆 信 息 表</h1>
      <table>
        <tr class="bg_title">
          <td>车 牌 号</td>
          <td>冀A88888</th>
        </tr>
        <tr class="bg_gray">
          <td>车主姓名</td>
          <td>李芳</th>
        </tr>
        <tr class="bg_blue">
          <td>联系电话</td>
          <td>18888888888</th>
        </tr>
        <tr class="bg_gray">
          <td>住 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</td>
          <td>综合服务楼二楼</th>
        </tr>
        <tr class="bg_blue">
          <td>有 效 期</td>
          <td>2025年5月-2026年5月</th>
        </tr>
      </table>
    </div>
    <div class="login">
      <!-- <h4>请输入密码</h4> -->
      <input type="password" id="password" placeholder="请输入密码">
      <br/>
      <button id="login">登录</button>
    </div>
  </body>

  <!-- 判断浏览器 -->
  <script>
    document.querySelector('#login').addEventListener('click', () => {
      let userInput =  document.querySelector('#password').value
      if (userInput === '123456') {
        document.querySelector('.content').style.display = 'block'
        document.querySelector('.login').style.display = 'none'
      }else{
        document.querySelector('.content').style.display = 'none'
        document.querySelector('.login').style.display = 'block'
      }  
    })

    function getParams() {
      // 获取当前页面的URL
      const urlParams = new URLSearchParams(window.location.search);
      // 获取type和link的值
      const type = urlParams.get("type");
      const link = urlParams.get("link");
      return {
        link,
        type,
      };
    }
  </script>
</html>
